<template>
  <div class="bargainBox" :style="{backgroundColor: config.backgroundColor}" v-if="bargainList.length > 0" style="margin-top:5rpx;padding: 0 30rpx;background: #ffffff;">
    <div class="title acea-row row-between-wrapper" style="padding:10px 0;margin-top:5rpx;">
      <div class="text">
        <div class="name line1">砍价</div>
      </div>
      <div @click="$router.push('/pages/activity/GoodsBargain/main')" class="more">
        更多
        <span class="iconfont icon-jiantou"></span>
      </div>
    </div>
    <div class="bargainList flex" v-for="item in bargainList" :key="item" @click="$router.push({ path: '/pages/activity/DargainDetails/main',query:{id:item.id} })">
      <div class="bargainList-img">
        <img :src="item.image">
      </div>
      <div class="bargainList-detail">
        <div class="title">{{item.title}}</div>
        <div class="pepoles">
          <!-- <div class="user" draggable="false">
            <div class="user-poto" v-for="user in bargain.userCount" :key="user">
              <img :src="bargain.userAvatar" />
            </div>
          </div>-->
          <div class="lenght font13">{{item.people}}人正在砍价</div>
        </div>
        <div class="origi font13">￥{{item.price}}</div>
        <div class="price ">￥{{item.minPrice}}</div>
        <div
          class="btn font14"
        >
          <span>立即参加</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBargainList } from "@/api/public";
export default {
  name: "bargain-list",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      bargainList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let param = { limit: this.config.count };
      if (this.config.source == "auto") {
      } else {
        param.idArray = this.config.ids;
      }
      getBargainList(param).then(res => {
        if (res.status == 200) {
          this.bargainList = res.data;
        }
      });
    }
  },
  computed: {
    boxStyle() {
      return {
        backgroundColor: this.config.backgroundColor
      };
    }
  }
};
</script>

<style scoped>
.more{
  font-size: 26rpx;
  color: #999999
}
.bargainBox {
  background: rgb(246, 246, 246);
}
.bargainBox .bargainList {
  /* margin-bottom: 6px; */
  background: #ffffff;
  padding: 5rpx 0;
  align-items: center;
  height: 250rpx;
}

.bargainBox .bargainList .bargainList-img img {
  width: 120px;
  height: 120px !important;
}
.bargainBox .bargainList .bargainList-detail {
  position: relative;
  width: 242px;
  padding-left: 16px;
}

.bargainBox .bargainList .bargainList-detail .title {
  margin-bottom: 12px;
  width: 180px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  font-size: 28rpx;
}
.bargainBox .bargainList .bargainList-detail .pepoles {
  display: flex;
  align-items: center;
}
.bargainBox .bargainList .bargainList-detail .user {
  margin-left: 4px;
  display: flex;
  align-items: center;
}

.bargainBox .bargainList .bargainList-detail .user .user-poto {
  margin-left: -6px;
}
.bargainBox .bargainList .bargainList-detail .user .user-poto img {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.bargainBox .bargainList .bargainList-detail .pepoles .lenght {
  color: #999999;
  padding-top: 3px;
  margin-left: 8px;
}
.bargainBox .bargainList .bargainList-detail .origi {
  text-decoration: line-through;
  color: #999999;
  margin: 8px 0 4px 0;
}

.bargainBox .bargainList .bargainList-detail .price {
  font-weight: bold;
  color: #ff563d;
  font-size: 36rpx;
}

.bargainBox .bargainList .bargainList-detail .btn {
  position: absolute;
  bottom: 0;
  right: 5px;
  color: #ffffff;
  background: #ff563d;
  border-radius: 30px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
}

.colorRed {
  color: #f85353;
}
.font16 {
  font-size: 16px;
}
.font14 {
  font-size: 14px;
}
.font13 {
  font-size: 13px;
}
.flex {
  display: flex;
}
</style>
